/*
		#################################################################
		## CSS for software inventory system			       ##
		## Coded by: Hilmi Azli	- UPM 2009/2013 - 151945	       ## 
		## Designed for Header and Footer layout		       ## 
		## Optional design for page content			       ##
		##							       ##
		## Code style: CSS3	- firefox 4+,IE9+,Chrome 12+,Safari 4+ ##
		#################################################################
*/


* { padding: 0; margin: 0; } /* CSS reset */ 

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #D8D8D8;
}

#wrapper { 
 margin: 0 auto;
 width: 100%;
}

/* optional content support */
#content { 
  background: #FFFFFF;
 border-radius: 20px; 
 -moz-border-radius: 20px; 
 -webkit-border-radius: 20px; /*
 -moz-box-shadow: 2px 2px 1px #000000;
 -webkit-box-shadow: 2px 2px 1px #000000;
 box-shadow: 2px 2px 1px #000000; */
 -moz-box-shadow: 0px 0px 4px #000000;
 -webkit-box-shadow: 0px 0px 4px #000000;
 box-shadow: 0px 0px 4px #000000;
 position: relative;
 margin: auto;
 min-height: 400px;
 width: 800px;
}

#content-container { 
 position: relative;
 margin: auto;
 min-height: 410px;
 width: 800px;
}
/* -------------------------*/

#page-container { /* back content frame - avoid browser error */
 position: relative;
 margin: 0 auto;
 height: 510px;
 width: 100%;
 top: 15px;
}
 
#info-container{
position: relative;
margin: 0 auto;
top: 3px;
width: 800px;
background: #2B2B2B; 
 border-bottom-left-radius: 30px; 
 -moz-border-radius-bottomleft: 30px; 
 -webkit-border-radius-bottomleft: 30px;
 border-bottom-right-radius: 30px; 
 -moz-border-radius-bottomright: 30px; 
 -webkit-border-radius-bottomright: 30px;
 overflow: hidden; 
}

#info-stripe-top {
 position:relative; 
 height: 4px;
 background: #4c97e9;
 width: 100%;
 margin: 0 auto;
 top: 2px;
}

#info-stripe-bottom { 
 position: relative;
 height: 4px;
 background: #4c97e9;
 width: 762px;
 margin: 0 auto;
 border-bottom-left-radius: 40px; 
 -moz-border-radius-bottomleft: 40px; 
 -webkit-border-radius-bottomleft: 40px;
 border-bottom-right-radius: 40px; 
 -moz-border-radius-bottomright: 40px; 
 -webkit-border-radius-bottomright: 40px; 
}

#info-content {
position: relative;
left: 20px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
padding: 7px 0px;

}

#info-content a {
text-decoration: none;
color: #4c97e9;

}

#info-content a:hover{
color: #7FFF00;
} 
  
#header {
 top:0px;
 position: relative;
 height: 100px;
 background: #2B2B2B;
 width: /*1280px*/ 800px;
 margin: 0 auto;
 /* radius */

}

#header-stripe { 
 height: 70px;
 background: #6B6659;
 width: 100%;
 margin: 0 auto;
}

.home {
 top:1px;
 position: relative;
 margin: 0 auto;
 width: 90px;
 height: 22px;
 text-decoration: none;
}

a img { /* remove border for linked image */
  border: none;
}

#menu-container { /* menu frame */ 
 top: 12px;
 position: relative;
 height: 50px;
 background: #D8D8D8;
 margin: auto;
 width: 50%;
 border:none 0px #000000;
 /* shape */
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright:0px;
 -moz-border-radius-bottomleft:75px;
 -moz-border-radius-bottomright:75px;
 -webkit-border-top-left-radius:0px;
 -webkit-border-top-right-radius:0px;
 -webkit-border-bottom-left-radius:75px;
 -webkit-border-bottom-right-radius:75px;
 border-top-left-radius:0px;
 border-top-right-radius:0px;
 border-bottom-left-radius:75px;
 border-bottom-right-radius:75px;
}

#styleboxd { /* bottom stripe  */
 top: 0px;
 position: relative;
 height: 3px;
 background: #4c97e9;
 margin: auto;
 width: 800px;
}

#styleboxe { /* top stripe  */
 top: 9px;
 position: relative;
 height: 3px;
 background: #4c97e9;
 margin: auto;
 width: 400px;
}

.panel_button {
 margin-left: auto;
 margin-right: auto;
 position: relative;
 width: 173px;
 height: 30px;
 top: -2px;
 background: #2B2B2B;
 z-index: 11;
 cursor: pointer;
 /* border radius */
 border:none 0px #000000;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright:0px;
 -moz-border-radius-bottomleft:75px;
 -moz-border-radius-bottomright:75px;
 -webkit-border-top-left-radius:0px;
 -webkit-border-top-right-radius:0px;
 -webkit-border-bottom-left-radius:75px;
 -webkit-border-bottom-right-radius:75px;
 border-top-left-radius:0px;
 border-top-right-radius:0px;
 border-bottom-left-radius:75px;
 border-bottom-right-radius:75px;
}

.panel_button img {
	position: relative;
	top: 4px;
    margin-left: auto;
    margin-right: auto;
	left: 33px;
	border: none;
	width: 20px;
}

.panel_button a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	position: relative;
	left: 43px;
	top: -2px;
	font-family: Arial, Helvetica, sans-serif;
}

.panel_button a:hover {
	color: #999999;
}

#panel {
	position: relative;
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	-khtml-opacity: 0.90;
	opacity: 0.90;
	height: 0px;
	top: -2px;
	margin: auto;
    width: 100%;    
	z-index: 10;
	overflow: hidden;
	background: #000000;
}

#panel_contents {
	height: 100%;
	top: 70px;
	margin: 0 auto;
	width: 80%;
	position: relative;
}

#panel_contents ul li {
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: left;
	list-style: none;

}

#panel_contents ul li desc { /* menu link description */
	font-family: Arial, helvetica, sans-serif;
	font-weight: italic;
	font-size: 10px;
	color: #6E6E6E;
	z-index: 12;
}

#panel_contents ul li img {
	position: relative;
	height: 1px;
	margin: auto;
	width: 100%;
	
}

#panel_contents ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

#panel_contents ul li a:hover {
	color: #4c97e9;
	
}

#footer { 
	position: relative;
	background: #2B2B2B;
	width: 100%;
	margin: auto;
	top: 20px;
	height: 200px;
}

#footer-stripe {
	position: relative;
	background: #4c97e9;
	width: 100%;
	top: 3px;
	padding-bottom: 3px;
}

#foot {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: #B8B8B8;
	margin: 0 auto;
	text-align: left;
	font-size: 0.85em;
	width: 755px;
	margin: 0 auto;
	top: 10px;
	height: 140px;
}

#foot h1 {
	font-size: 1.6em;
	height: 0px;
	padding-top: 5px;
	color: #888888;
}

#foot ul li {
	text-decoration: none;
	list-style: none;
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: italic;
	height: 0px;
	padding-left: 15px;
	padding-top: 25px;
	color: #E8E8E8;
}

#foot .left {
	width: 225px;
	float: left;
	padding-left: 25px;
	
}

#foot .mid {
	width: 225px;
	float: left;
	padding-left: 25px;
}

#foot .right {
	width: 225px;
	background: green;
	float: left;
	padding-left: 25px;
}

#foot .sepa {
	width: 1px;
	height: 130px;
	margin-top: 0px;
	float: left;
	border-right: 1px solid #FFFFFF;
}

#footer-copyright {
	font-family: Arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	position: relative;
	margin: 0 auto;
	width: 1150px;
	top: 15px;
	height: 39px;
}

#footer-copyright a {
	color: #4c97e9;
	text-decoration: none;
}

#footer-copyright a:hover {
	color: #99FF66;
}

#footer-copyright p {
	font-family: Arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 8px;
}